<template>
  <div class="side">
    <el-scrollbar class="scrollbar">
      <el-menu
        :default-active="route.path"
        :collapse="iscollapse"
        :collapse-transition="false"
        >
        <Item :RouterList="RouterList"></Item>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from 'pinia';
import { useRoute } from 'vue-router';
import Item from './item.vue';
import { useUserStore , useAppStore } from '@/stores';
import { computed } from 'vue';
const userStore=useUserStore()
const appStore=useAppStore()
const {RouterList}=storeToRefs(userStore)
const route=useRoute()
const iscollapse=computed(()=>appStore.isHeadActive)


</script>

<style lang="scss" scoped>
.side {
  .scrollbar {
    width: 100%;
    height: calc(100vh - $base-logo-height);
    transition: all $transition-time;
    :deep(.el-menu) {
      width: 100%;
      transition: all $transition-time ;
      border:0!important;
    }
  }
}
</style>
